<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>论坛-城建就业指导网</title>
<link href="${rc.contextPath}/css/page.css" rel="stylesheet">
<link href="${rc.contextPath}/css/style.css" rel="stylesheet">
<script src="${rc.contextPath}/js/jquery.1.10.1.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/js/jquery.lib.min.js"></script>
<script src="${rc.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap -->
<link href="${rc.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
	body{
		background-color: #eaeaea;
	}
	.forum-title{
		color: #0092EF;
		text-decoration: none;
	}
	.username a{
		color: #2d64b3;
    	text-decoration: none;
	}
	.content > ul >li:hover{
		background-color: #EAEAE8;
	}
</style>
</head>
<body>
	
	<!--   nav     -->
		#parse("header.html")
	
	<div id="container">
		
		<!--  左侧个人中心 -->
		<div class="sidebar" >
			<div class="panel">
				<div class="panel-heading">
					<h4 class="panel-title"><b>我在论坛</b></h4>
				</div>
				<div class="panel-body">
					<a href="#">
						<img class="img-thumbnail" src="http://127.0.0.1:8080/image/portrait/$!curr_user.portrait" width="40px"/>
					</a>
					<div>
						<div class="username">用户名：<a href="#">$!{curr_user.nickname}</a></div>
						<div class="user-auth">用户组：
						#if($!roleId == 3)
						论坛管理员
						#else
						普通用户
						#end
						</div>
					</div>
					<div class="clearfix"></div>
					<div class="list-group">
						<a class="list-group-item"  style="border: 0px;" href="${rc.contextPath}/forum/mymessage/1">
							<span class="glyphicon glyphicon-envelope"></span>&nbsp;消息
							<span class="badge" id="unLookMessageCount">0</span>
						</a>
						<a class="list-group-item"  style="border: 0px;" href="${rc.contextPath}/forum/mypostlist/1">
							<span class="glyphicon glyphicon-book"></span>&nbsp;我的帖子
						</a>
						<a class="list-group-item"  style="border: 0px;" href="${rc.contextPath}/user/collection/post/1">
							<span class="glyphicon glyphicon-bookmark"></span>&nbsp;我的收藏
						</a>
					</div>
					
					<a type="button" class="btn btn-primary btn-lg btn-block" href="#fabuform">
						<span class="glyphicon glyphicon-edit"></span>&nbsp;快速发帖
					</a>
					<table class="table">
						<tr>
							<td>精品帖子
								<br/>
								&nbsp;10
							</td>
							<td><a href="${rc.contexPath}/forum/list/1">所有帖子</a><br/></td>
						</tr>
						
					</table>
					
				</div>
			</div>
		</div>
		
		<!--  右侧帖子列表   -->
		<div class="content" >
			
			<div id="search_box" style="margin-bottom: 30px;">
				<form id="searchForm" name="searchForm" action="${rc.contextPath}/forum/list/1" method="get">
					<input type="text" id="search_input" name="keyword" style="height: 33px;padding: 0px;margin: 0px;width: 583px;" value="$!keyword" placeholder="请输入职位名称，如：产品经理" />
					<input type="submit" id="search_button" value="搜索" />
				</form>
			</div>
			
			<ul class="list-group">
			
				#foreach($!forumPost in $!forumPostList)
				<li class="list-group-item">
					<h4 class="list-group-item-heading">
						<span class="glyphicon glyphicon-eye-open text-muted">20</span>
						<span class="forum-title"><a href="${rc.contextPath}/forum/detail/$!{forumPost.id}/1">$!forumPost.post_title</a></span>
						<span class="pull-right text-muted">
							<span class="glyphicon glyphicon-user post-starter">$!forumPost.post_starter.nickname</span>
						</span>
					</h4>
					<div class="list-group-item-text text-muted">
						$!forumPost.post_content
						<span class="pull-right text-muted">$!forumPost.gmt_modified</span>
					</div>
					#if($!roleId == 3)
					<div style="height: 20px">
						<a class="delPost" data-id="$!forumPost.id" href="#">删帖</a>
					</div>
					#end
				</li>
				#end
				
			</ul>
			
			<div class="pagination" style="margin: 0px 0 20px;">$!page.pageString</div>
			
			<div class="panel panel-warning" style="margin-bottom: 20px;">
				<form  method="post" id="fabuform">
					<div style="font-size: 14px; margin: 0 0 20px 15px; height: 30px; line-height: 30px;">
						<!-- <div style="height: 40px; line-height: 40px; border-radius: 5px; color: white; background-color: #FF7100; width: 80px; text-align: center;">快速发帖</div>
					 -->
					 <span class="glyphicon glyphicon-edit"></span>
					 <b>发表新帖</b>
					 </div>
					<div style="margin: 0px 20px; padding: 20px 10px 1px 10px; border: 1px solid #ccc">
						<div
							style="float: left; height: 30px; line-height: 30px; margin-left: 40px;">标题：</div>
						<input style="width: 300px; height: 30px; line-height: 30px;; padding-left: 5px; margin-right: 20px;"
							maxlength="50" name="post_title" id="post_title"/>最多可输入50字<span style="margin-left: 10px;color: red;" id="errorTitleMsg"></span>
						<div style="clear: both;"></div>
						<div style="margin: 10px 5px 10px 5px;">
							<textarea id="content" name="post_content" style="width: 100%; height: 100px;"></textarea>
							<span style="margin-left: 10px;color: red;" id="errorContentMsg"></span>
							<input id="fabu" type="submit" class="btn btn-info" value="发布"
										style="float: right; margin-top: 10px;"  />
							<div style="clear: both;"></div>
						</div>
					</div>
				</form>
			</div>
			
		</div>
		
	</div>
	
	
	<a id="backtop" title="回到顶部" rel="nofollow"></a>
	<script type="text/javascript" src="${rc.contextPath}/js/core.min.js"></script>
	
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
							aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="myModalLabel">
						模态框（Modal）标题
					</h4>
				</div>
				<div class="modal-body">
					按下 ESC 按钮退出。
				</div>
				
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</body>
<script type="text/javascript">
/* search结果飘绿	*/
(function($) {
	
	var searchVal = $('#search_input').val();
	var reg = /\s/g;
	searchVal = searchVal.replace(reg, "").split("");

	var resultL = '';
	var resultR = '';
	$('.list-group li').each(function() {
		console.log(searchVal);
		resultL = $('.forum-title a', this).text().split("");
		console.log(resultL);
		jQuery.each(resultL, function(i, v) {
			if(jQuery.inArray(v.toLowerCase(), searchVal) != -1 || jQuery.inArray(v.toUpperCase(), searchVal) != -1) {
				resultL[i] = '<span  style="color: red;">' + v + '</span>';
			}
		});
		$('.forum-title a', this).html(resultL.join(''));

	});

})(jQuery);


$(document)
.on(
		"click",
		".pagination a",
		function(e) {
			var pageNum = $(this).attr("pageData");
			if (pageNum == 0 || isNaN(pageNum)) {
				return;
			}
			
			window.location.href = "${rc.contextPath}/forum/list/"+ pageNum + "?keyword=$!keyword";
		});
		
//验证表单
$("#fabuform").validate({
	rules: {
		post_title: {
			required: true,
			maxlength: 50
		},
		post_content: {
			required: true
		}
	},
	messages: {
		post_title: {
			required: "请输入帖子标题",
			maxlength: "标题不能超过50个字符"
		},
		post_content: {
			required: "请输入内容",
		}
	},
	errorPlacement: function(label, element) {
		
		/*modify nancy*/
		if(element.attr("type") == "radio") {
			label.insertAfter($(element).parents('ul')).css('marginTop', '-20px');
		} else if(element.attr("type") == "checkbox") {
			label.insertAfter($(element).parent()).css('clear', 'left');
		} else {
			label.insertAfter(element);
		};
	},
	submitHandler: function(form) {

					jQuery.post("${rc.contextPath}/forum/addForumPost", $("#fabuform").serialize(), function(data) {
						$("#myModalLabel").html(data.code);
						$(".modal-body").html(data.info);
						$("#myModal").modal('show');
						$('#myModal').on('hide.bs.modal', function () {
							if(data.code == 200){
    							window.location.href = "${rc.contextPath}/forum/list/1";
    						}
    						if(data.code == 505){
    							window.location.href = "${rc.contextPath}/login";
    						}
						});
						
						
					}, 'json');
					
			
	}
});

$(function(){
	jQuery.getJSON('${rc.contextPath}/forum/getUnLookMessageCount',function(data){
		if(data!=0){
			$("#unLookMessageCount").html(data);
		}
	})
});	

$(document)
.on(
		"click",
		".delPost",
		function(e) {
			jQuery.ajax({
				url	:	"${rc.contextPath}/forum/delPost?postId="+$(this).data("id"),
				type:	"get",
				dataType:"json",
				success:	function(data){
					alert(data.info);
					if(data.code == 200){
						location.reload();
					}
				}
			});
		});
</script>

</html>